<template>
	<view>
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
			<view class="hander" :style="{ 'top': mt1 + 'px' }">
				<view class="hander-hander">
					<view class="search">
						<view class="cearch-list" :class="hourglassShow==true?'cearch-list1':''">
							<view class="search-left">
								<view class="left-one" @tap="timeShow=true">
									<view> <text>住店</text> <text
											style="color:#111111 ; margin: 0 10rpx;">{{FormData.arriveDate.substring(5,10)}}</text>
									</view>
									<view> <text>离店</text> <text
											style="color:#111111 ; margin: 0 10rpx;">{{FormData.leaveDate.substring(5,10)}}</text>
									</view>
								</view>
								<view class="left-two">
									共{{count}}晚
								</view>
								<view class="left-three">
									<u-icon name="search" size="30"></u-icon>
								</view>
							</view>
							<view class="search-right">
								<input :model="FormData.name" @change='search' placeholder="请输入套餐名称" class="input" />
							</view>
						</view>
					</view>
					<view class="tab" v-if="hourglassShow==false">
						<view class="searchCondition">
							<!-- 区域筛选 -->
							<!-- 	<span class="item" @click="areaShowed()" :class="areaShow==true?'arrow-up-fill':''">
								<u-icon name="arrow-down-fill" bold='true' v-if="areaShow==false" size="20"
									:label="areaVal" labelPos="left" labelSize="26"></u-icon>
								<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68'
									size="20" :label="areaVal" labelPos="left" labelSize="26"></u-icon>
							</span> -->
							<!-- 区域筛选 -->
							<span class="item" @click="areaShowed()" :class="areaShow==true?'arrow-up-fill':''">
								<u-icon name="arrow-down-fill" bold='true' v-if="areaShow==false" size="20" label="区域"
									labelPos="left" labelSize="26"></u-icon>
								<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68'
									size="20" label="区域" labelPos="left" labelSize="26"></u-icon>
							</span>
							<!-- 价格筛选 -->
							<span class="item" @click="listShowed()">
								<u-icon name="arrow-down-fill" bold='true' v-if="listShow==false" size="20"
									:label="listVal" labelPos="left" labelSize="26"></u-icon>
								<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68'
									size="20" :label="listVal" labelPos="left" labelSize="26"></u-icon>
							</span>
							<!-- 特色筛选 -->
							<span class="item" @click="sortShowed()" :class="sortShow==true?'arrow-up-fill':''">
								<u-icon name="arrow-down-fill" bold='true' v-if="sortShow==false" size="20"
									:label="sortVal" labelPos="left" labelSize="26"></u-icon>
								<u-icon name="arrow-up-fill" bold='true' v-else color="#007a68" labelColor='#007a68'
									size="20" :label="sortVal" labelPos="left" labelSize="26"></u-icon>
							</span>
							<!-- 销量 -->
							<span class="item" @click="Salesed(Sales)" :class="Sales==true?'arrow-up-fill':''">
								<u-icon name="arrow-up-fill" bold='true' v-if="Sales==false" size="20" :label="SalesVal"
									labelPos="left" labelSize="26"></u-icon>
								<u-icon name="arrow-down-fill" bold='true' v-else color="#007a68" labelColor='#007a68'
									size="20" :label="SalesVal" labelPos="left" labelSize="26"></u-icon>
							</span>
						</view>
					</view>

					<!--  区域筛选 -->
					<view class="content" :style="{'height':(h-mt)+'px'}" v-show="areaShow">
						<view class="custom_popup">
							<view class="types">
								<!-- <text class="title">价格</text> -->
								<view class="pricequjian" style="height: 240rpx;">
									<view class="jiage" v-for="(item, index) in list1" :key="index"
										@click="clickareaShow(item, index)">
										<view class="contentpeice" :class="{'Doublactive': item.region}">
											{{item.name}}
											<view class="xuanzhong" v-if="item.region">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
									</view>
								</view>
								<view class="u-btn">
									<view class="left" @click="del">
										<text> 重置</text>
									</view>
									<view class="right" @click="add">
										<text>确定</text>
									</view>
								</view>

							</view>
						</view>
					</view>

					<!--  价格筛选 -->
					<view class="content" :style="{'height':(h-mt)+'px'}" v-show="listShow">
						<view class="custom_popup">
							<view class="types">
								<text class="title" style="margin: 30rpx 0;">价格</text>
								<view style="padding: 0 10rpx 10rpx;">
									<slide-range ref="slideRange" :scale="{interval:1500}" min="0" max="1500"
										:key="update" height="8" @change="changeSlide" :value="slideVal"
										:activeStyle="{'background':'#007A69'}"
										:backgroundStyle="{'background':'#EFEFEF'}">
										<template #firstBlock>
											<image class="block-image"
												src="https://i.ringzle.com/file/20240407/317a2774538f432cacc768c0b257b73b.png">
											</image>
										</template>
										<template #secondBlock>
											<image class="block-image"
												src="https://i.ringzle.com/file/20240407/317a2774538f432cacc768c0b257b73b.png">
											</image>
										</template>
									</slide-range>
								</view>

								<view class="pricequjian" style="height: 230rpx;">
									<view class="jiage" v-for="(item, index) in priceList" :key="index"
										@click="clickprice(item, index)">
										<view class="contentpeice" :class="{'Doublactive': currentIndex == item.id}"
											v-if='item.priceEnd==null'>
											{{item.priceStart}}
											<view class="xuanzhong" v-if="currentIndex == item.id">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
										<view class="contentpeice" :class="{'Doublactive': currentIndex == item.id}"
											v-else-if='item.priceStart==null'>
											{{item.priceEnd}}
											<view class="xuanzhong" v-if="currentIndex == item.id">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
										<view class="contentpeice" :class="{'Doublactive': currentIndex == item.id}"
											v-else>
											{{item.priceStart}}-{{item.priceEnd}}
											<view class="xuanzhong" v-if="currentIndex == item.id">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
									</view>
								</view>
								<view class="u-btn">
									<view class="left" @click="del">
										<text> 重置</text>
									</view>
									<view class="right" @click="add">
										<text>确定</text>
									</view>
								</view>

							</view>
						</view>
					</view>

					<!-- 特色筛选 -->
					<view class="content" :style="{'height':(h-mt)+'px'}" v-show="sortShow">
						<view class="custom_popup">
							<view class="types">
								<!-- 		<view class="title" style="margin: 30rpx 0;"> 特色服务 </view>
								<view class="pricequjian" style="height: 400rpx;">
									<view class="jiage" v-for="(item, index) in featureList" :key="index"
										@click="radioFeature(item.dictValue, index)">
										<view class="contentpeice" :class="{'Doublactive': item.select}"
											style="margin-right: 24rpx; background-color: #F5F8FA;font-size: 24rpx ; color: #333333; font-weight: Regular;  border-radius: 16rpx;">
											{{item.dictLabel}}
											<view class="xuanzhong" v-if="item.select">
												<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
													alt="">
											</view>
										</view>
									</view>
								</view> -->
								<view class="title" style="margin: 30rpx 0;"> 酒店类型 </view>
								<view class="text" style="display: flex; flex-wrap: wrap;">
									<view class="pricequjian" style="height: 100rpx; width: 100%;">
										<view class="jiage" v-for="(item, index) in typeList" :key="index"
											@click="radioType(item.dictValue, index)">
											<view class="contentpeice" :class="{'Doublactive': typeIndex == index}">
												{{item.dictLabel}}
												<view class="xuanzhong" v-if="typeIndex == index">
													<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
														alt="">
												</view>
											</view>
										</view>
									</view>
								</view>

								<view class="u-btn">
									<view class="left" @click="del">
										<text> 重置</text>
									</view>
									<view class="right" @click="add">
										<text>确定</text>
									</view>
								</view>

							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="showCard">
				<view class="card" v-if="showCard">
					<view class="" v-for="item,index in searchList" :key="index">
						<view class="card-store" @click="cardBtn(item)">
							<view class="card-left">
								<image :src="item.cover" mode="aspectFill"></image>
								<text class="text" v-if="item.isTransfer==1"> 码头接送</text>
								<text v-else></text>
							</view>
							<view class="card-right">
								<view class="card-title">
									{{item.jointName}}
								</view>

								<view class="card-text1">
									<u-tag :text="ite" v-for="ite,ids in item.featureLabelList" :key="ids"
										type="success" plain size="mini" borderColor='#efefef' color='#8188A8'>
									</u-tag>
								</view>
								<view v-if="item.saleNum" class=""
									style="color: #999990; font-size: 20rpx; font-weight: Regular; margin: 4rpx 10rpx 0;">
									已售<span style="margin: 0 4rpx;">{{item.saleNum}}</span>
								</view>
								<view class="card-price">
									<text v-if='item.bottomPrice !==null'> <text style="font-size: 22rpx;">￥</text>
										{{item.bottomPrice}}
										<text style="font-size: 22rpx; padding: 6rpx;">起</text> </text>
									<text v-else>暂无房间</text>
								</view>
							</view>
						</view>
					</view>
					<nodata v-if="searchList.length === 0"></nodata>
				</view>



			</view>
			<uni-load-more :status="status" color="#007aff" />
			<!-- 选择入驻时间 -->

			<u-calendar title="选择日期" startText="住店" endText="离开" :maxDate="maxDate" :defaultDate="defaultDate"
				confirmDisabledText="请选择日期" :formatter="formatter" :show="timeShow" :mode="mode" @confirm="confirm"
				@close="closeDate" ref="calendar" :closeOnClickOverlay="true">
			</u-calendar>


		</view>
	</view>
</template>

<script>
	const d = new Date()
	const year = d.getFullYear()
	let month = d.getMonth() + 1
	month = month < 10 ? `0${month}` : month
	const date = d.getDate()
	import slideRange from "@/components/tianzai-slider-range/index.vue";
	import nodata from '@/compoments/NoData/index1.vue'
	export default {
		components: {
			nodata,
			slideRange
		},
		data() {
			return {
				update: false,
				slideVal: [100, 300],
				status: 'more', //加载状态
				title: '船票+住宿',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				mt1: uni.getSystemInfoSync().statusBarHeight + 39,
				hourglassShow: false,
				showCard: true,
				FormData: {
					name: '',
					endPortNo: '',
					startPortNo: '',
					arriveDate: '', //	到达时间(yyyy-MM-dd)
					leaveDate: '', //离开时间(yyyy-MM-dd)
					limit: 10, //每页显示记录数
					page: 1, //当前页码
					priceSort: '', //价格排序: 1有高高低, 0由低到高
					priceStart: '',
					priceEnd: '',
					category: '', //	酒店类别(逗号分割): 字典HotelCategory
					featureLabels: '', //	特色服务(逗号分割):字典FeatureLabels
				},
				arrveList: [], //到达点列表
				searchList: {}, //数据集合
				// arrive: '',
				// leave: '',
				count: '',
				timeShow: false,
				mode: 'range',
				priceIndex: 0,
				featureIndex: 0,
				typeIndex: null,
				priceList: {
					0: "由高到低",
					1: "由低到高"
				},

				featureList: [],
				typeList: [],
				maxDate: `${year}-${month}-${date + 4}`,
				defaultDate: new Date().Format('yyyy-MM-dd'),
				type: '1',
				AddressList: [],
				list1: [{
					name: '全部',
					id: ''
				}],
				currentIndex: 0,
				areaShowIndex: 0,
				priceList: [{
						id: 0,
						priceStart: '不限',
						priceEnd: null,
					},
					{
						id: 1,
						priceStart: '0',
						priceEnd: '150以下',
					},
					{
						id: 2,
						priceStart: '150',
						priceEnd: '200',
					},
					{
						id: 3,
						priceStart: '200',
						priceEnd: '350',
					},
					{
						id: 4,
						priceStart: '350',
						priceEnd: '650',
					},
					{
						id: 5,
						priceStart: '650',
						priceEnd: '1050',
					},
					{
						id: 6,
						priceStart: '1050',
						priceEnd: '1500',
					},
					{
						id: 7,
						priceStart: null,
						priceEnd: '1500以上',
					},
				],
				listShow: false,
				List: [
					['渔家乐', '地方菜系', '海鲜自助', '小吃快餐', '咖啡甜品']
				],
				listVal: '价格',
				sortVal: '筛选',
				SalesVal: '销量',
				sortShow: false,
				sort: [
					['默认排序', '好评优先', '距离优先', '高价优先', '低价优先', '星级']
				],
				// areaVal: '',
				areaShow: false,
				area: [
					['全部']
				],
				Sales: false,
				featureLabelsLIst: [],
				regionList: [],
			};
		},
		// computed: {
		// 	typeList() {}
		// },
		//上拉加载
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading'
				// uni.showNavigationBarLoading()
				this.getList()
			}
		},

		onLoad(e) {
			this.getAddressList()
			let obj = JSON.parse(e.list)
			this.FormData.arriveDate = obj.arriveDate
			this.FormData.leaveDate = obj.leaveDate


			this.$refs.calendar.setFormatter(this.formatter);
			this.getDict();

			// let opt = JSON.parse(wx.getStorageSync('cpzsParams'));
			// this.arrveList = opt.arrveList;
			// this.FormData.arriveDate = opt.startDate;
			// this.FormData.leaveDate = opt.endDate;
			// this.FormData.startPortNo = opt.fromCode;
			// this.FormData.endPortNo = opt.toCode;

			// 计算几晚
			let start = new Date(obj.arriveDate).getTime();
			let end = new Date(obj.leaveDate).getTime();
			let time = end - start;
			let day = parseInt(time / (1000 * 60 * 60 * 24));
			this.count = day;
			// 请求数据

			this.getData()


		},

		methods: {
			changeSlide(e) {
				this.FormData.priceStart = e.firstValue;
				this.FormData.priceEnd = e.secondValue
			},
			areaShowed() {
				this.areaShow = !this.areaShow
				this.listShow = false
				this.sortShow = false
			},
			listShowed() {
				this.listShow = !this.listShow
				this.sortShow = false
				this.areaShow = false
			},
			sortShowed() {
				this.sortShow = !this.sortShow
				this.listShow = false
				this.areaShow = false
			},
			Salesed(type) {
				this.listShow = false
				this.areaShow = false
				this.sortShow = false
				this.Sales = !this.Sales
				//销量排序
				this.searchList.sort(function(a, b) {
					if (!type) { //降序
						return parseFloat(b.saleNum) - parseFloat(a.saleNum);
					} else {
						return parseFloat(a.saleNum) - parseFloat(b.saleNum); //	升序
					}
				});
			},
			clickprice(e, i) {
				this.currentIndex = i;

				if (e.id == 0) {
					this.FormData.priceStart = '';
					this.FormData.priceEnd = '';
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else if (e.id == 1) {
					this.FormData.priceStart = '';
					this.FormData.priceEnd = 150;
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else if (e.id == 7) {
					this.FormData.priceStart = 1500;
					this.FormData.priceEnd = '';
					this.slideVal = [parseFloat(1500), parseFloat(1500)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
				} else {
					this.slideVal = [parseFloat(e.priceStart), parseFloat(e.priceEnd)];
					this.$nextTick(() => {
						this.$refs.slideRange.create();
					})
					this.FormData.priceStart = e.priceStart;
					this.FormData.priceEnd = e.priceEnd;
				}
			},
			// 区域筛选
			clickareaShow(e, i) {
				this.areaShowIndex = i;
				this.FormData.islandId = e.id
				this.areaVal = e.name
				this.regionList = []
				this.$set(this.list1[i], 'region', !this.list1[i].region)
				if (i == 0) {
					this.list1.forEach((item, index) => {
						if (index > 0 && this.list1[i].region) {
							this.$set(this.list1[index], 'region', false)
						}
					})
				} else {
					this.$set(this.list1[0], 'region', false)
				}

			},
			// 特色服务筛选
			radioFeature(item, index) {
				this.$set(this.featureList[index], 'select', !this.featureList[index].select)
			},
			// 酒店类型筛选
			radioType(item, index) {
				this.typeIndex = index;
				this.FormData.category = item
			},
			// 筛选按钮
			hourglass() {
				// this.hourglassShow != this.hourglassShow
				this.hourglassShow = true;
			},
			// 重置
			del() {
				this.listShow = false //价格筛选
				this.sortShow = false //特色
				this.areaShow = false //区域

				this.list1.forEach((d, i) => {
					this.$set(this.list1[i], 'region', false);
				})
				// this.hourglassShow = false
				this.priceIndex = null;
				this.featureIndex = null;
				this.typeIndex = null;
				this.FormData.featureLabels = ''
				this.featureLabelsLIst = []
				this.FormData.priceSort = ''
				this.FormData.category = ''
				// this.areaVal = '全部'
				this.currentIndex = 0
				this.areaShowIndex = 0
				this.FormData.priceStart = '';
				this.FormData.priceEnd = '';
				this.featureList.filter(item => item.select = false)
				this.list1.filter(item => item.region = false)
				this.FormData.islandId = ''
				this.regionList = []

				this.slideVal = [100, 300]
				this.$nextTick(() => {
					this.$refs.slideRange.create();
				})
				this.getData();
			},
			// 确定
			add() {

				// this.hourglassShow = false;
				this.listShow = false //价格筛选
				this.areaShow = false //三镇四乡 筛选
				this.sortShow = false //特色
				// let featureList = this.featureList.filter(item => item.select == true)
				// featureList.forEach(item => {
				// 	this.featureLabelsLIst.push(item.dictValue)
				// })
				// this.FormData.featureLabels = this.featureLabelsLIst.toString()
				// // .toString()


				let list2 = this.list1.filter(item => item.region == true)
				list2.forEach(item => {
					this.regionList.push(item.id)
				})
				this.FormData.islandId = this.regionList.toString()
				this.getData();

			},

			open() {
				// this.hourglassShow = true;
			},
			close() {
				this.hourglassShow = false;
				this.listShow = false
			},


			// 获取区域
			getAddressList() {
				this.$api.get("/api/hotel/selectScenicList", this.FormData).then((res) => {
					this.AddressList = res.data.data
					this.AddressList.forEach(item => {
						this.list1.push({
							name: item.scenicName,
							id: item.id
						})
					})
					this.list1.forEach((item, index) => {
						this.$set(this.list1[index], 'region', false)
					})
					// this.$set(this.list1[i], 'region', !this.list1[i].region)
					// this.tabList(this.list1[0])
				});
			},
			// 获取港口

			// getAddressList() {
			// 	this.$api.get("/api/hotel/listPort", this.type).then((res) => {
			// 		this.AddressList = res.data.data

			// 		this.AddressList.forEach(item => {
			// 			this.list1.push({
			// 				name: item.portName,
			// 				id: item.portNum
			// 			})
			// 		})
			// 	});
			// },




			formatter(day) {
				if (uni.getStorageSync('maxQueryDayNum')) {
					for (let i = 0; i <= +uni.getStorageSync('maxQueryDayNum'); i++) {
						let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
							'yyyy-MM-dd');
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},
			closeDate() {
				this.timeShow = false;
			},
			// 搜索
			search(val) {
				this.FormData.name = val.detail.value
				this.getData();

			},

			getDict() {
				this.$api.get('/sys/dict/type/all').then(res => {
					//this.$store.state.Dict = Object.assign(res.data);
					this.typeList = res.data.data.find((p) => p.dictType == 'HotelCategory').dataList;
					this.featureList = res.data.data.find((p) => p.dictType == 'FeatureLabels').dataList;
					this.featureList.forEach((item, index) => {
						this.$set(this.featureList[index], 'select', false)
					})
				})
			},

			confirm(e) {
				let start = new Date(e[0]).getTime();
				let end = new Date(e[e.length - 1]).getTime();
				let time = end - start;
				let day = parseInt(time / (1000 * 60 * 60 * 24));
				let arriveDate = e[0]; // 截取第一个字符
				let leaveDate = e[e.length - 1]; // 截取最后一个字符
				this.FormData.arriveDate = arriveDate
				this.FormData.leaveDate = leaveDate
				this.count = day;
				this.timeShow = false
				this.getData()
			},



			//切换停靠港
			clickEndPortNo(item) {
				this.FormData.endPortNo = item.id;
				this.getData();
			},
			// 去预订酒店
			circle() {},
			getList() {
				let that = this
				this.$api.get("/api/shipHotel/getShipHotelJointList", this.FormData).then((res) => {
					// this.searchList = res.data.data.list;
					if (res.data.code === 0) {
						that.FormData.page++;
						let {
							list,
							total
						} = res.data.data;
						if (that.searchList.length + list.length > total || list.length == 0)
							return that.isOver = true;
						that.searchList = [...that.searchList, ...list];
					} else that.$showToast(res.data.msg);
				});
			},
			// 获取列表数据
			getData() {
				this.FormData.page = 1
				this.$api.get("/api/shipHotel/getShipHotelJointList", this.FormData).then((res) => {
					this.searchList = res.data.data.list;
				});
			},
			// 去酒店详情
			cardBtn(item) {
				// 将数据存储在本地
				wx.setStorageSync('detailsList', item);
				uni.navigateTo({
					url: "/pagesIndex/orderDetails/orderDetails?list=" + JSON.stringify({
						jointName2: item.jointName,
						bottomPrice: item.bottomPrice,
						id: item.id,
						...this.FormData,
						...item
					})
				})

			},
		}
	}
</script>
<style lang="less" scoped>
	.content {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		position: relative;
	}

	.custom_popup {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .4);
		top: 0;
		left: 0;
		position: absolute;
		z-index: 999;

		.types {
			width: 100%;
			padding: 30rpx 30rpx 56rpx;
			box-sizing: border-box;
			background: #FFFFFF;

			.block-image {
				width: 48rpx;
				height: 48rpx;
			}

			.title {
				font-size: 30rpx;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				color: #111111;
				line-height: 42rpx;
			}

			.items {
				margin-top: 10rpx;
				display: flex;
				flex-wrap: wrap;
				margin-left: -24rpx;

				&>view {
					width: calc(100% / 3 - 24rpx);
					height: 64rpx;
					background: rgba(0, 122, 105, .06);
					border-radius: 16rpx;
					line-height: 64rpx;
					text-align: center;
					margin-top: 20rpx;
					font-size: 26rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #111111;
					margin-left: 24rpx;

					&.active {
						background: #007A69;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.searchCondition {
		width: 100%;
		// position: relative;
		// background-color: #f5f9fa;
		// margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		// height: 60rpx;
		// padding-top: 30rpx;

		.item {
			margin: auto auto;

			.u-icon {
				justify-content: center;
			}
		}

	}

	.pricequjian {
		display: flex;
		flex-wrap: wrap;
		// height: 400rpx;
		// justify-content: ;
		// justify-content: flex-end;
	}

	.Doublactive {
		background-color: #F0F7F6 !important;
		color: #007A69 !important;
		border: 1px solid #007A69 !important;

	}

	.jiage {
		margin: 0 7rpx;
		width: 23%;
		height: 68rpx;

		.contentpeice {
			border-radius: 12rpx;
			background: #F4F7F9;
			width: 100%;
			height: 100%;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 23rpx;
			color: #333333;
			line-height: 68rpx;
			text-align: center;
			font-style: normal;
			position: relative;

			.xuanzhong {
				width: 30rpx;
				height: 25rpx;
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
				border-top-left-radius: 10rpx;
				background: #007A69;
				display: flex;
				align-items: center;
				justify-content: center;

				img {
					width: 16rpx;
					height: 16rpx;
				}
			}
		}

	}






	// .hourglas {
	// 	box-sizing: border-box;
	// 	// height: 90vh;
	// 	// padding: 230rpx 48rpx;
	// 	padding: 80rpx 48rpx 50rpx;

	.hander-one {
		.title {
			font-size: 30rpx;
			color: #111111;
			margin: 48rpx 0 24rpx;
		}

		.text {
			display: flex;
			width: 654rpx;
			flex-wrap: wrap;
		}
	}

	.u-btn {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-between;

		.left,
		.right {
			width: 300rpx;
			height: 88rpx;
			border-radius: 50rpx;
			border: 1rpx solid #007A69;
			font-size: 32rpx;
			text-align: center;
			display: flex;
			align-items: center;

			text {
				margin: 0 119rpx;
			}
		}

		.left {
			color: #007A69;
		}

		.right {
			color: #fff;
			background-color: #007A69;
		}
	}

	.u-page__tag-item {
		// display: flex;
		color: #333333 !important;
		font-size: 24rpx !important;
		margin: 24rpx 0 0;
	}

	// }
</style>
<style lang="less">
	.active {
		background-color: #E4F4FF !important;
		color: #007A69 !important;
	}

	.cearch-list1 {
		width: 700rpx !important;
	}


	.pop-hourglassShow {

		.u-transition {
			// background-color: rgba(0, 0, 0, 0) !important;
		}

		// .u-popup__content,
		.u-transition {
			top: 100rpx !important;
		}
	}

	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-tabs__wrapper__nav__line {
		left: 30rpx !important;
		bottom: 1rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>


<style lang="less">
	.u-icon__label {
		font-size: 26rpx !important;
		font-weight: bold !important;
	}

	// .u-mini {
	// 	height: 36rpx !important;
	// 	line-height: 36rpx !important;
	// }

	// .u-icon__icon {
	// 	font-size: 40rpx !important;
	// }

	.u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>

<style lang="scss" scoped>
	.hander {
		position: fixed;
		top: 117rpx;
		height: 200rpx;
		z-index: 10;
	}

	.hander-hander {
		background-color: #fff;
		width: 100%;
		height: 200rpx;

	}

	.search {
		display: flex;
		box-sizing: border-box;
		// padding: 48rpx 24rpx 12rpx;
		margin: 10rpx 12rpx;
		position: relative;
		z-index: 16;

		.cearch-list {
			background: #f5f8fa;
			display: flex;
			border-radius: 50rpx;
			width: 100%;
			height: 86rpx;
			line-height: 30rpx;

			.search-left {
				display: flex;

				.left-one {
					margin: 15rpx 0 30rpx 30rpx;

					view {
						// display: block;
						// margin: 10rpx 10rpx;
						color: #999999;
						font-size: 20rpx;
						width: 120rpx;
					}
				}

				.left-two {
					width: 65rpx;
					// display: block;
					margin: 28rpx 10rpx;
					color: #111111;
					font-size: 20rpx;
					border-right: 1rpx solid #999999;
					padding-right: 16rpx;
				}

				.left-three {
					margin: 28rpx 10rpx;

					.u-icon__icon {
						font-size: 40rpx !important;
					}
				}
			}

			.search-right {
				// background: aqua;

				.input {
					// background: #FF4141;
					width: 300rpx;
					height: 100%;
				}
			}
		}

		.cearch-hourglass {

			display: flex;
			align-items: center;
			text-align: center;
			margin: 0 10rpx;
		}

		.icon {
			font-size: 60rpx;
			position: absolute;
			right: 20%;
			top: 16rpx;
		}
	}

	.serchicon {
		width: 120rpx;

		.u-icon {
			width: 80rpx !important;
			height: 80rpx !important;
			// background-color: aqua;
		}
	}

	.tab {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		padding: 0 16rpx;
		border-top: 1rpx solid #EFEFEF;
		border-bottom: 1rpx solid #EFEFEF;
		box-sizing: border-box;
		background-color: #fff;

		.tab-list {
			width: 100%;
			height: 80rpx;

			.tab {
				display: flex;
				flex-wrap: nowrap;
			}
		}

		.serchicon {
			display: flex;
			align-items: center;

			.u-icon {
				width: 22rpx;
				height: 22rpx;
			}
		}
	}

	.showCard {
		box-sizing: border-box;
		padding-top: 26.5%;
		height: 100vh;
	}

	.card {
		box-sizing: border-box;
		background: #f5f8fa;
		padding: 24rpx;
		// height: 1000rpx;
		height: 100%;


		.card-store {
			margin: 0 0 20rpx;
			display: flex;
			background-color: #fff;
			width: 702rpx;
			height: 240rpx;
			border-radius: 10rpx;

			.card-left {
				width: 200rpx;
				height: 240rpx;
				position: relative;
				// border-radius: 10rpx 0 0 10rpx;

				image {
					border-radius: 16rpx 0 0 16rpx;
					width: 100%;
					height: 100%;
				}

				.text {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 20rpx;
					color: #FFFFFF;
					background: #FF7D01;
					border-radius: 16rpx 0 18rpx 0;
					padding: 2rpx 3rpx;
				}


			}

			.card-right {
				padding: 24rpx;

				.card-title {
					font-weight: 600;
					width: 458rpx;
					font-size: 30rpx;
					color: #111;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 显示的行数 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}

				.card-text {
					margin: 12rpx 0;
				}

				.card-text1 {
					width: 200rpx;
					display: flex;
					justify-content: space-between;


					.text {
						display: block;
						display: flex;
						color: #777777;
						font-size: 24rpx;
						border: 1rpx solid #6e6e6e;
					}

				}

				.card-price {
					padding: 8rpx;
					display: flex;
					justify-content: space-between;
					font-size: 38rpx;
					color: #FF4141;
				}
			}
		}
	}

	.card1 {
		margin: 24rpx;
	}

	.ticketList {
		width: 702rpx;
		height: 592rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-bottom: 25rpx;
		padding-bottom: 40rpx;

		.images {
			border-radius: 16rpx 16rpx 0 0;
			width: 702rpx;
			height: 380rpx;
		}

		&_tag {
			display: flex;
			margin: 20rpx;
		}

		text {}

		&_price {
			display: flex;
			justify-content: space-between;

			button {
				margin-right: 24rpx;
				margin-top: -15rpx;
			}

			&_money {
				width: 92rpx;
				height: 28rpx;
				font-size: 32rpx;
				font-family: PingFang-SC-Bold, PingFang-SC;
				font-weight: bold;
				color: #FF4141;
				line-height: 28rpx;
				display: flex;
				margin-left: 24rpx;
				margin-top: 14rpx;
			}
		}
	}
</style>